<template>
  <div class="charts-container" style="margin-top: 10px">
    <el-row style="margin-bottom: 10px">
      <el-col :span="22" :offset="1">
        <el-card shadow="hover" style="padding: 10px">
          <calendarHeatmap />
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-col :span="22" :offset="1">
        <el-card shadow="hover" style="padding: 10px">
          <lineChart />
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 10px" :gutter="10">
      <el-col :span="15" :offset="1">
        <el-card shadow="hover" style="padding: 10px">
          <barChart />
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card shadow="hover" style="padding: 10px">
          <pieChart />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Component, Vue } from "vue-property-decorator";
import calendarHeatmap from "@/components/calendarHeatmap.vue";
import lineChart from "@/components/lineChart.vue";
import barChart from "@/components/barChart.vue";
import pieChart from "@/components/pieChart.vue";
@Component({
  name: "charts",
  components: {
    calendarHeatmap,
    lineChart,
    barChart,
    pieChart,
  },
})
export default class charts extends Vue {}
</script>

<style lang="scss" scoped>
</style>